<template>
  <div class="order">
      <div class="address clearFix">

        <div class="next-btn" v-if="!haveAddress" >
          <mt-button type="danger" size="large" @click = "gotoAddress('/me/add')"><img src="../../assets/me/a1.png" alt="" class="add-ico"><span class="text">暂无地址去添加</span></mt-button>
        </div>


          <ul class="list" v-if="haveAddress">

            <li class="clearFix ok-list" v-for="(item,index) in addresses">
              <div class="fl ">
                <p>{{item.name}}</p>
                <p>{{item.telephone}}</p>
                <p>{{item.provice_name}}{{item.city_name}}{{item.district_name}}{{item.address}}</p>
              </div>
              <span class="edit" @click = "gotoAddress('/me/add?addressId='+item.address_id)">
                <img src="../../assets/me/a2.png" alt="">
            </span>
            </li>
          </ul>

      </div>

    <div class="salename">
      <img src="../../assets/footer1.png" alt="">
      <span>女神有财</span>
      <b>官方</b>
      <b>已绑定 平台直邮</b>
    </div>

      <div class="goods clearFix" v-for="detailData in products">
          <div class="fl">
              <img class="icon" :src="detailData.thumb">
            <div class="text">
              <span>{{detailData.name}}{{detailData.model}}</span>
              <p>{{detailData.price}}<i>（心理预期售卖价格）</i></p>
            </div>
          </div>
          <!--<div class="fr">-->
          <!--x1-->
            <!--&lt;!&ndash;{{detailData.quantity}}&ndash;&gt;-->
          <!--</div>-->
      </div>
      <!--<div class="pay">-->
          <!--<div class="top clearFix">-->

              <!--<div class="fl left">-->
                    <!--<div class="fl">-->
                        <!--支付配送-->

                    <!--</div>-->
                    <!--<div class="fr payment">-->
                        <!--<p>货到付款</p>-->
                        <!--<p>顺丰快递</p>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="fr more">-->
                  <!--&gt;-->
                <!--</div>-->
          <!--</div>-->
          <!--<div class="area">-->
                <!--<textarea class="t-area" placeholder="买家留言" v-model="content">-->
                <!--</textarea>-->
          <!--</div>-->

      <!--</div>-->
    <div class="money">
      <!--f88491-->
      成交价格:<span>￥{{totalPrice}}元</span>
    </div>

    <div class="total" >
      <div class="top clearFix" >
        <!--v-for="it in orderContent.totals"-->
        <div class="fl">
          运费:
        </div>
        <div class="fr payment">
          <p><b>（平台包邮，已减免22元）</b>￥0元</p>
        </div>
      </div>
      <div class="top clearFix" >
        <!--v-for="it in orderContent.totals"-->
        <div class="fl">
          总计:
        </div>
        <div class="fr payment">
          <p>￥{{totalPrice}}元</p>
        </div>
      </div>
      <div class="top clearFix" >
        <!--v-for="it in orderContent.totals"-->
        <div class="fl">
          女神余额：{{surplusMoney}}元
          <!--payment_surplus.text-->
        </div>
        <div class="fr ">
          <mt-switch v-model="surplus" @change="turn"></mt-switch>

        </div>
      </div>

    </div>

      <div class="all">
              <div class="left ">
                <!--<p >共{{Numb}}件商品</p>-->
                <p>现金实付</p>
                <p class="price" v-if="!surplus">￥{{totalPrice}}元</p>
                <p class="price" v-if="surplus">￥{{settlement}}元</p>

              </div>
              <div class="right">
                  <mt-button type="danger" size="small" v-on:click="payFn">立即购买</mt-button>
              </div>
      </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  import { Switch } from 'mint-ui';
//  Vue.component(Switch.name, Switch);

  export default {
  name: 'Order',
  data () {
    return {
      haveAddress:false,
      addresses:{},
      products:[],
//      detailData:{},
      addressesId:'',
      content:'',
      totalPrice:0,
      Numb:'',
      surplus:false,
      surplusMoney:'￥0',
      //女神余额
      settlement:0,
      //结算
      surplus_c:0
      //传参 女神余额结算
    }
  },
  mounted:function(){
    this.getAddress();
    var ids = this.$route.query.productId;
    this.initData(ids);
    var _this = this;

    setTimeout(function(){

      _this.getSurplusMoney(ids);

    },200)


  },
  watch:{
    'products':{
      handler:function(){
        if(this.products.length == this.$route.query.productId.split(',').length){
//          console.log(this.products)
          var tempTotalPrice = 0;

          for(var i=0;i<this.products.length;i++){
            tempTotalPrice += Number(this.products[i].price.replace('￥','').replace(',',''))
          }
          this.totalPrice = tempTotalPrice;

        }

      }
    }
  },
  methods:{
    gotoAddress(path){
      this.$router.push(path)
    },
    addAddress:function(){
      this.$router.push({path:'/me/add',query: {redirect: '/me/order'}});
    },
    payFn:function(){
      //confirmPay
      var ajaxData = {}
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      ajaxData.product_ids = this.$route.query.productId;
      ajaxData.address_id = this.addressesId;
      ajaxData.content = '';
      ajaxData.surplus = this.surplus_c;

      $.ajax({
        type:'post',
        url: RouteMap.confirmPay,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){
            window.location.href = res.data.data.payment.url;
          }
          else{
            Toast(res.msg);
          }
        }
      })

    },
    initData:function(id){

      $('body').scrollTop(0);
      var productId = id;
      var _this = this;
      var ajaxData = {};
      ajaxData.product_ids = productId;
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
//      ajaxData.type = 2;
      setTimeout(function(){
        $.ajax({
          type:'post',
          url: RouteMap.products,
          data:ajaxData,
          success:function(res){
            if(res.code == 200){

              _this.products=res.data;
              var a =res.data.length;
//              console.log(res.data);
              var str = '零一二三四五六七八九十';
              if(a<10){
                _this.Numb =str.charAt(a);
              }else{
                _this.Numb = a;
              }

            }
            else{
              Toast(res.msg)
            }
          }
        })
      })
    },
    getAddress(){
      var getAddressData = {};
      getAddressData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      var _this = this;

      $.ajax({
        type:'post',
        url: RouteMap.getAddress,
        data:getAddressData,
        success:function(res){
          if(res.code == 200){
            if(Object.keys(res.data.addresses).length>0){
              _this.haveAddress = true;

              var i=0;
              for(var k in res.data.addresses){

                if(i >= 0)
                {
                  _this.addresses[k] = res.data.addresses[k];
                  _this.addressesId = _this.addresses[k].address_id;
                  return;
                }
                i++
              }
//              console.log(_this.addresses)
//              _this.addresses.push();
            }
          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },

    getSurplusMoney:function(id){
      var productId = id;
      var _this = this;
      var ajaxData = {};
      ajaxData.product_ids = productId;
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      $.ajax({
        type:'get',
        url:RouteMap.payment_surplus,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){
//            console.log(res.data.payment_surplus);
            _this.surplusMoney =res.data.payment_surplus.text;
          }
          else{
//            //Toast(res.msg)
          }
        }
      });
    },

    turn:function(){

      if(this.surplus){
         this.surplus_c =1;
        var price1 =Number(this.surplusMoney.replace('￥',''));
        console.log(price1);
        if(price1<this.totalPrice){
          this.settlement = this.totalPrice-price1;
        }
        else{
          this.settlement =0;
        }

      }
      else{
        this.surplus_c =0;
      }
      console.log(this.surplus);

//      if(this.surplus){
//        this.surplus_c =1;
//        var price1 =Number(this.surplusMoney.replace('￥',''));
////        console.log(price1);
//        if(price1<this.totalPrice){
//          this.settlement = this.totalPrice-price1;
//        }
//        else{
//          this.settlement =0;
//        }
//      }


    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .order{
    font-family: "PingFang-SC-Regular";

  }
.address{width:100%;
         box-sizing:border-box;
         padding:.4rem 1rem;
         background:#fff;
         margin-top:.4rem;
}

.salename{
  padding:.3rem 1rem 0.1rem;
  border-top: .5rem solid #f2f2f2;
}
.salename span{
  font-size: .7rem;
  line-height: 1.6rem;
  margin-right:.5rem ;

}
.salename b{
  font-size: .4rem;
  background: #f38c83;
  border-radius: 3px;
  color: #fff;
  line-height: 1.6rem;
  margin-right: .3rem;
  padding:.05rem;
}
.salename img{
  width:1.4rem;
  border-radius: 50%;
}

.goods,.pay{
  box-sizing:border-box;
  background:#f2f2f2;
  margin:0 .8rem ;
  padding:.5rem;
  line-height: 1rem;
  margin-bottom: .2rem;
}
.goods .fl{
  /*width: 12.3rem;*/
}
.goods .fl img{
   width: 3rem;
  float: left;
  border: 1px solid #ddd;
  padding: 0.1rem;
  margin-right: 0.3rem;
}

.goods .fl .text{
  width: 9.5rem;
  /*padding-left: .5rem;*/
  float: left;
  font-size: .5rem;
  color:#707070;

}
.goods .fl .text p{
  padding-top: .7rem;
  font-size: .78rem;
  color:#4D4D4D;
}
.goods .fl .text p i{
  font-size: .35rem;
  color:#868686;
}





.address .name{ padding-left:.4rem;}
.address .more{ padding-top:.4rem;}

.pay .top .left{width:80%;}
.pay .area .t-area{
      background:#f2f2f2;
      width:100%;
      height:2.4rem;
      border:none;
      /*padding:.2rem;*/
      margin-top:.2rem;
      box-sizing:border-box;
}
.coupon .left{width:80%;}
.payfor .title{
    font-size:.8rem;
    padding-bottom:.2rem;
}

.payfor .system li{
    border-bottom:1px solid #222;
    padding:.3rem 0;
}
.payfor .system li:last-child{
                    border-bottom:none;
                    }
.payfor .system li .name{
    padding-left:.2rem;
}
.payfor .tip{
    font-size:.6rem;
    color:#bbb;
    padding-top:.2rem;
    line-height:.8rem;
}



.all{
   display:flex;
   justify-content:space-around;
   align-items:center;
   position:fixed;
   bottom:0;left:0;
   width:100%;
   padding: 0.5rem 0;
  border-top: 1px solid #ccc;
  background:#fff;

}
.all .left{
  flex:1;
  height:100%;
  background:#fff;
  /*padding:.4rem 0 0 .6rem;*/
  padding-left: .6rem;
  box-sizing:border-box;

}
.all .left  p{
  padding-top:.1rem;
  font-size: .5rem;
  color: #707070;
}
.all .left .price{
  color:#0D0D0D;
  font-size: .8rem;
}
.all .right{
  padding-right: .5rem;
  text-align: right;
}
.all .right input{
  width:100%;
  height:2rem;
  background:#aaa;
}

.list {
  background:#fff;
  width:100%;
  box-sizing:border-box;
  margin-top:.3rem;
  padding:0;
  font-size:.7rem;
}
.list li{
}
.list li:last-child{
  border-bottom:none;
}
.list li.ok-list{
  padding:1rem;
  background: url("../../assets/me/a3.png");
  background-size: 100% 100%;
  font-size: 0.6rem;
  margin-top: 0.5rem;
}
.list li.ok-list .fl{
  width: 10rem;
  word-wrap: break-word;
  word-break: break-all;
}
.list li.ok-list p{
  padding-bottom:.2rem;

}
.list li.ok-list .icon{
  margin:.4rem .3rem 0 0;
  border-radius:50%;
}

.list li b{
  float:left;
  color:#000;
  line-height:2rem;

}
.list li .edit{
  line-height:1rem;
  font-size:.9rem;
  color:#aaa;
  float:right;
  margin-top: 1.9rem;
}
.list li .edit img{
  width: .7rem;
}
.add-ico{
  width: 0.5rem;
  margin-right: 0.2rem;
}
.next-btn{
  margin-top: 0.5rem;
  padding: 0;
}
.next-btn .add-ico,.next-btn .text{
  vertical-align: middle;
  color: #1c1c1c;
}
.next-btn .mint-button--danger{
  background: #f5f5f5;
}


.money{
  color:#FF7B80;
  font-size: .5rem;
  padding:.6rem 0.8rem;
  text-align: right;
}
.money span{
  font-size: .9rem;
}


  .order{
    padding-bottom: 3rem;
  }

.total{
  border-top: .5rem #f2f2f2 solid;
  font-size: .58rem;
  width:100%;
  box-sizing:border-box;
  padding:.4rem 1rem;
  background:#fff;
  margin-top:.4rem;
  margin-bottom: .6rem;
  font-family: PingFang-SC-Medium;
  color:#707070;

}
.total .top {
  line-height: 2rem;
  border-bottom: 1px solid #eee;
}
.payment b{
  color:#999;
  font-size: .48rem;
}
.total i{
  font-family: PingFang-SC-Medium;
  color:#999;
  font-size:.5rem;
}
  .mint-switch{
    margin-top:.3rem;
  }
</style>
